<template>
  <div class="page" @scroll="handleScroll">
    <h1>电影列表页面</h1>

    <FilmItem v-for="item in list" :key="item.filmId" v-bind="item" />

    <div v-show="loading" class="loading">加载中...</div>

    <div v-show="isFinished" class="loading">别拉了，没有啦</div>
  </div>
</template>

<script>
import axios from 'axios'
import FilmItem from '../components/FilmItem.vue'

export default {
  components: {
    FilmItem
  },

  data() {
    return {
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 1, // 数据总条数
      loading: false, // 表示是否请求中
      list: [],
      isBottom: false, // 是否到底了
    }
  },

  computed: {
    // 是否完成了，没有更多了
    isFinished() {
      return this.list.length >= this.total
    }
  },  

  watch: {
    isBottom(value) {
      if (value && !this.loading && !this.isFinished) {
        // 到底了
        console.log('准备加载下一页')

        this.refresh()
      }
    }
  },

  methods: {
    async refresh() {
      this.loading = true

      const { data } = await axios.get('https://m.maizuo.com/gateway', {
        params: {
          cityId: 440300,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 1
        },
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      })

      if (data.status !== 0) {
        console.error('请求失败', data.msg)
        return
      }

      // 拼接这次的数据
      this.list = [...this.list, ...data.data.films]
      // 总条数设置
      this.total = data.data.total
      // 加载完成
      this.loading = false

      // pageNum++
      this.pageNum++
    },

    /**
     * 滚动事件处理函数
     */
    handleScroll(event) {
      // 滚动的距离 scrollTop
      // 内容的高度 scrollHeight
      // 可视区域的高度 clientHeight
      const { scrollTop, scrollHeight, clientHeight } = event.target

      // 最大可以滚动的距离
      const max = scrollHeight - clientHeight

      // 计算是否滚动到底部
      //    100 阈值
      if (scrollTop >= max - 100) {
        console.log('到底了')
        this.isBottom = true
      } else {
        this.isBottom = false
      }
    }
  },

  created() {
    this.refresh()
  }
}
</script>

<style scoped>
.page {
  height: 100%;
  overflow-y: auto;
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  color: red;
  background-color: #eee;
}
</style>
